<!DOCTYPE html>
<!--
  Google HTML5 slide template

  Authors: Luke Mahé (code)
           Marcin Wichary (code and design)
           
           Dominic Mazzoni (browser compatibility)
           Charles Chen (ChromeVox support)

  URL: http://code.google.com/p/html5slides/
-->
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>HTML5 & ChromeOS - A true friendship (Oct 2011)</title>

    <meta charset="utf-8">
    <meta content="width=1100,height=750" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta content="yes" name="apple-mobile-web-app-capable">
	
	<script src="js/ga.js" async="" type="text/javascript"></script>
    <script src="js/slides.js"></script>
    
</head>
  

  <body class="loaded" style="display: none;">
    <section class="slides layout-regular template-default">
      
      <article class="biglogo current">
      </article>

      <article class="next">
        <h1>
          HTML5 &amp; ChromeOS
			<br/>A true friendship
        </h1>
		
        <p>
          Ido Green <a href="http://twitter.com/greenido" target="_blank">@greenido</a><br/>
 				    <a href="http://plus.ly/greenido">http://plus.ly/greenido</a>
          <br>
          Oct 19, 2011
        </p>
		<img src="images/london.png">
      </article>
      
      <article class="far-next">
        <h3>Agenda</h3>
        <ul class="build">
          <li class="to-build">The State of HTML5</li>
          <li class="to-build">New features that empower enterprises</li>
          <li class="to-build">ChromeOS</li>
          <li class="to-build">Tools To Make Your Life Easier</li>
        </ul>
      </article>
      
      <article class="fill">
        <img src="images/h5_logo.png">
      </article>
           
      <article>
        <h3>HTML5 &amp; CSS3 Support</h3>
        <p>2008</p>
        <img class="centered" src="images/readiness-2008.png">
        <div class="source"><a href="http://html5readiness.com/" target="_blank">http://html5readiness.com/</a></div>
      </article>
      
      <article>
        <h3>HTML5 &amp; CSS3 Support</h3>
        <p>2011</p>
        <img class="centered" src="images/readiness-2011.png">
        <div class="source"><a href="http://html5readiness.com/" target="_blank">http://html5readiness.com/</a></div>
      </article>
      
      <article>
        <q class="casestudy" style="margin-top:125px;">When can we start using HTML5?</q>        
        <div class="build">
          <q class="casestudy green to-build" style="margin-top:25px; font-size: 128pt;"><strong>Today!</strong></q>
        </div>
      </article>
      
      <article>
        <q class="casestudy" style="margin-top:125px;">But how can I use it safely?</q>        
        <div class="build">
          <q class="casestudy to-build" style="margin-top:25px; font-size: 64pt;"><strong>Feature Detection</strong></q>
        </div>
      </article>
      
      <article>
        <q class="casestudy" style="margin-top: 150px;">You are using <strong>feature detection</strong>, right?</q>
        <q class="casestudy build"><strong class="to-build">right?</strong></q>
        
      </article>

      <article class="fill">
        <img src="images/modernizr.png">
        <div class="build">
          <div class="to-build" style="position:absolute; bottom: 75px;background-color: rgba(255, 255, 255, 0.8);padding: 30px 10px 30px 60px;margin-left:-60px;width:100%;font-size: 1.5em;">
            <a href="http://bit.ly/pV8Xp5">http://modernizr.com</a>
          </div>
        </div>
      </article>
      
      <article class="fill">
        <q class="casestudy" style="margin-top: 400px;background-color: rgba(255, 255, 255, 0.8); width:900px;margin-left:-60px;padding-top: 20px;padding-bottom:0px;margin-bottom:0px;">Okay, how about <strong>older browsers?</strong></q>
        <div class="build">
          <div class="to-build">
          <img src="images/polyfill.png">
          <q class="casestudy black" style="margin-top:0px;background-color: rgba(255, 255, 255, 0.8); width:900px;margin-left:-60px;padding-top: 20px;padding-bottom:20px;">
            <a href="http://bit.ly/HTML5PolyFills">PolyFills - When you need them</a></q>
          </div>
        </div>
      </article>
            
      <article>
        <h2>Good To Go</h2>
      </article>
      
      <article>
        <h3>Semantic Tags, doctype, charset, quotes &amp; more</h3>
        <pre class="prettyprint"><span class="dec">&lt;!doctype html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">page title</span><span class="tag">&lt;/title&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">utf-8</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;style&gt;</span><span class="pln">
      body </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ccc; }</span><span class="pln">
    </span><span class="tag">&lt;/style&gt;</span><span class="pln">
  </span><span class="tag">&lt;/head&gt;</span><span class="pln">
  </span><span class="tag">&lt;body</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">myClass</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;article&gt;</span><span class="pln">Hello, world!</span><span class="tag">&lt;/article&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">text</span><span class="pln"> </span><span class="atn">required</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/body&gt;</span><span class="pln">
  </span><span class="tag">&lt;script&gt;</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'Oh, hello there!'</span><span class="pun">);</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span></pre>
      </article>
 
      <article>
        <h3>Form Elements</h3>
        <div class="build">
          <pre class="form-inputs prettyprint to-build"><input required="" type="text"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><b><span class="atn">required</span></b><span class="pln"> </span><span class="tag">/&gt;</span></pre>
          <pre class="form-inputs prettyprint to-build"><input value="some@email.com" type="email"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"</span><b><span class="atv">email</span></b><span class="atv">"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"some@email.com"</span><span class="pln"> </span><span class="tag">/&gt;</span></pre>
          <pre class="form-inputs prettyprint to-build"><input min="2010-08-14" max="2011-08-14" value="2010-08-14" type="date"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"</span><b><span class="atv">date</span></b><span class="atv">"</span><span class="pln"> </span><b><span class="atn">min</span></b><span class="pun">=</span><span class="atv">"2010-08-14"</span><span class="pln"> </span><b><span class="atn">max</span></b><span class="pun">=</span><span class="atv">"2011-08-14"</span><span class="pln"> 
  </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"2010-08-14"</span><span class="tag">/&gt;</span></pre>
          <pre class="form-inputs prettyprint to-build"><input min="0" max="50" value="10" type="range"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"</span><b><span class="atv">range</span></b><span class="atv">"</span><span class="pln"> </span><b><span class="atn">min</span></b><span class="pun">=</span><span class="atv">"0"</span><span class="pln"> </span><b><span class="atn">max</span></b><span class="pun">=</span><span class="atv">"50"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"10"</span><span class="pln"> </span><span class="tag">/&gt;</span></pre>
          <pre class="form-inputs prettyprint to-build"><input results="10" placeholder="Search..." type="search"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"</span><b><span class="atv">search</span></b><span class="atv">"</span><span class="pln"> </span><b><span class="atn">results</span></b><span class="pun">=</span><span class="atv">"10"</span><span class="pln"> </span><b><span class="atn">placeholder</span></b><span class="pun">=</span><span class="atv">"Search..."</span><span class="pln"> </span><span class="tag">/&gt;</span></pre>
          <pre class="form-inputs prettyprint to-build"><input placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" type="tel"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"</span><b><span class="atv">tel</span></b><span class="atv">"</span><span class="pln">  </span><b><span class="atn">placeholder</span></b><span class="pun">=</span><span class="atv">"(555) 555-5555"</span><span class="pln">
   </span><b><span class="atn">pattern</span></b><span class="pun">=</span><span class="atv">"^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$"</span><span class="pln"> </span><span class="tag">/&gt;</span></pre>
          <pre class="form-inputs prettyprint to-build"><input step="1" min="-5" max="10" value="0" type="number"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"</span><b><span class="atv">number</span></b><span class="atv">"</span><span class="pln"> </span><b><span class="atn">step</span></b><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><b><span class="atn">min</span></b><span class="pun">=</span><span class="atv">"-5"</span><span class="pln"> </span><b><span class="atn">max</span></b><span class="pun">=</span><span class="atv">"10"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"0"</span><span class="pln"> </span><span class="tag">/&gt;</span></pre>        
        </div>
      </article>

      <article>
        <h3>Form Input Validation</h3>
        <div class="build">
          TBD: add in info on client-side validation - required, pattern, CSS pseudo-class selectors, formnovalidate, constraint validation API
        </div> 
      </article>
      
     
      
      <article>
        <h3>Data Attributes</h3>
        <pre class="prettyprint"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"out"</span><span class="pln"> </span><span class="atn">data-double</span><span class="pun">=</span><span class="atv">"rainbow"</span><span class="pln"> </span><span class="atn">data-freak</span><span class="pun">=</span><span class="atv">"out"</span><span class="tag">&gt;</span></pre>
        <pre class="prettyprint" style="margin-bottom:15px;"><span class="com">// Add new data attributes via JS.</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> el </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">'#out'</span><span class="pun">);</span><span class="pln">
el</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">'data-foo'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'bar'</span><span class="pun">);</span><span class="pln">

</span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">
</span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> key </span><span class="kwd">in</span><span class="pln"> el</span><span class="pun">.</span><span class="pln">dataset</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  html</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">key</span><span class="pun">,</span><span class="pln"> </span><span class="str">': '</span><span class="pun">,</span><span class="pln"> el</span><span class="pun">.</span><span class="pln">dataset</span><span class="pun">[</span><span class="pln">key</span><span class="pun">],</span><span class="pln"> </span><span class="str">'&lt;br&gt;'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

el</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> html</span><span class="pun">.</span><span class="pln">join</span><span class="pun">(</span><span class="str">''</span><span class="pun">);</span></pre>
        <p style="margin-top:10px;">Output:</p>
        <div class="build">
          <pre class="prettyprint to-build" style="margin-top:10px;"><span class="kwd">double</span><span class="pun">:</span><span class="pln"> rainbow
freak</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">out</span></pre>
        </div>
      </article>
      
      <article>
        <h3>Geolocation</h3>
        <pre class="prettyprint" style="margin-bottom: 10px;"><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">navigator</span><span class="pun">.</span><span class="pln">geolocation</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  navigator</span><span class="pun">.</span><span class="pln">geolocation</span><span class="pun">.</span><span class="pln">getCurrentPosition</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">position</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> latLng </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> google</span><span class="pun">.</span><span class="pln">maps</span><span class="pun">.</span><span class="typ">LatLng</span><span class="pun">(</span><span class="pln">
        position</span><span class="pun">.</span><span class="pln">coords</span><span class="pun">.</span><span class="pln">latitude</span><span class="pun">,</span><span class="pln"> position</span><span class="pun">.</span><span class="pln">coords</span><span class="pun">.</span><span class="pln">longitude</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> marker </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> google</span><span class="pun">.</span><span class="pln">maps</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">({</span><span class="pln">position</span><span class="pun">:</span><span class="pln"> latLng</span><span class="pun">,</span><span class="pln"> map</span><span class="pun">:</span><span class="pln"> map</span><span class="pun">});</span><span class="pln">
    map</span><span class="pun">.</span><span class="pln">setCenter</span><span class="pun">(</span><span class="pln">latLng</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">},</span><span class="pln"> errorHandler</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></pre> 
        <div id="geo-map" class="gmap example">
          <img src="images/staticmap.png"> 
        </div> 
        <button id="see-position">Show Position</button> <span id="geo-log"></span>
 
        <script defer="defer"> 
          (function() {
            var map = null;
            var geolog = document.querySelector('#geo-log');
            var geoMap = document.querySelector('#geo-map');
 
            function showPosition(position) {
              geolog.textContent = "You're within " + position.coords.accuracy +
                  " meters of (" + position.coords.latitude + ", " +
                  position.coords.longitude + ")";
              var latLng = new google.maps.LatLng(
                  position.coords.latitude, position.coords.longitude);
              var marker = new google.maps.Marker({
                position: latLng,
                map: map
              });
              map.setCenter(latLng);
              map.setZoom(15);
            }
 
            function handlePositionError(evt) {
              geolog.textContent = evt.message;
            }
 
            function successPositionHandler(evt) {
              // Load map if it doesn't already exist and when user clicks the button.
              if (!map) {
                map = new google.maps.Map(geoMap, {
                  zoom: 3,
                  center: new google.maps.LatLng(37.4419, -94.1419), // United States
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                map.getDiv().style.border =  '1px solid #ccc';
              }
 
              if (navigator.geolocation) {
                geolog.style.visibility = 'visible';
                geolog.textContent = 'Looking for location...';
                navigator.geolocation.getCurrentPosition(showPosition, handlePositionError);
                // Also monitor position as it changes.
                //navigator.geolocation.watchPosition(showPosition, handlePositionError);
              } else {
                geolog.textContent = 'Oops! Your browser does not support geolocation.';
              }
            }
 
            document.querySelector('#see-position').addEventListener('click', successPositionHandler, false);
            geoMap.addEventListener('click', successPositionHandler, false);
          })();
        </script>
      </article>
    
	 <article>
        <h3>Speech Input</h3>
        <pre class="prettyprint"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">x-webkit-speech</span><span class="pln"> </span><span class="tag">/&gt;</span></pre>
        <input id="speech-input-textbox" x-webkit-speech="" style="width: 400px; height: 50px; font-size: 135%; margin-left: auto; margin-right: auto; display: block;" type="text">
        <div class="build">
          <div class="to-build">
            <pre class="prettyprint"><span class="kwd">function</span><span class="pln"> startSearch</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">event</span><span class="pun">.</span><span class="pln">target</span><span class="pun">.</span><span class="pln">results</span><span class="pun">.</span><span class="pln">length </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">1</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> second </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">target</span><span class="pun">.</span><span class="pln">results</span><span class="pun">[</span><span class="lit">1</span><span class="pun">].</span><span class="pln">utterance</span><span class="pun">;</span><span class="pln">
    document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"second_best"</span><span class="pun">).</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> second</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">target</span><span class="pun">.</span><span class="pln">form</span><span class="pun">.</span><span class="pln">submit</span><span class="pun">();</span><span class="pln">
</span><span class="pun">}</span></pre>
            <div id="speech-results" class="speech-results">

            </div>

            <script> 
              document.getElementById("speech-input-textbox").addEventListener("webkitspeechchange", function(event) {
                var speechresults = document.getElementById('speech-results');
                speechresults.innerHTML = '';
                for (var res in event.results) {
                  speechresults.innerHTML += 'Utterance: ' + event.results[res]['utterance'] + '<br />Confidence: ' 
                    + event.results[res]['confidence'] + '<br /><br />';
                }
              }, false);
            </script>
          </div>
        </div>
      </article>
                  
      <article>
        <h3>Canvas</h3>
        <pre class="prettyprint"><span class="tag">&lt;canvas</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"canvas"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"838"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"220"</span><span class="tag">&gt;&lt;/canvas&gt;</span><span class="pln">
</span><span class="tag">&lt;script&gt;</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> canvasContext </span><span class="pun">=</span><span class="pln"> 
    document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"canvas"</span><span class="pun">).</span><span class="pln">getContext</span><span class="pun">(</span><span class="str">"2d"</span><span class="pun">);</span><span class="pln">
  canvasContext</span><span class="pun">.</span><span class="pln">fillRect</span><span class="pun">(</span><span class="lit">250</span><span class="pun">,</span><span class="pln"> </span><span class="lit">25</span><span class="pun">,</span><span class="pln"> </span><span class="lit">150</span><span class="pun">,</span><span class="pln"> </span><span class="lit">100</span><span class="pun">);</span><span class="pln">
  
  canvasContext</span><span class="pun">.</span><span class="pln">beginPath</span><span class="pun">();</span><span class="pln">
  canvasContext</span><span class="pun">.</span><span class="pln">arc</span><span class="pun">(</span><span class="lit">450</span><span class="pun">,</span><span class="pln"> </span><span class="lit">110</span><span class="pun">,</span><span class="pln"> </span><span class="lit">100</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">PI </span><span class="pun">*</span><span class="pln"> </span><span class="lit">1</span><span class="pun">/</span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">PI </span><span class="pun">*</span><span class="pln"> </span><span class="lit">3</span><span class="pun">/</span><span class="lit">2</span><span class="pun">);</span><span class="pln">
  canvasContext</span><span class="pun">.</span><span class="pln">lineWidth </span><span class="pun">=</span><span class="pln"> </span><span class="lit">15</span><span class="pun">;</span><span class="pln">
  canvasContext</span><span class="pun">.</span><span class="pln">lineCap </span><span class="pun">=</span><span class="pln"> </span><span class="str">'round'</span><span class="pun">;</span><span class="pln">
  canvasContext</span><span class="pun">.</span><span class="pln">strokeStyle </span><span class="pun">=</span><span class="pln"> </span><span class="str">'rgba(255, 127, 0, 0.5)'</span><span class="pun">;</span><span class="pln">
  canvasContext</span><span class="pun">.</span><span class="pln">stroke</span><span class="pun">();</span><span class="pln">
</span><span class="tag">&lt;/script&gt;</span></pre>
        <canvas id="canvas-area" width="838" height="225"></canvas> 
        <script defer="defer"> 
          var canvasContext = document.getElementById("canvas-area").getContext("2d");
          canvasContext.fillRect(250, 25, 150, 100);
          canvasContext.beginPath();
          canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2, false);
          canvasContext.lineWidth = 15;
          canvasContext.lineCap = 'round';
          canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
          canvasContext.stroke();
        </script> 
      </article>
      
      
      <article class="customGradient">
        <h3>Gradients</h3>
        <pre class="prettyprint"><span class="pln">background</span><span class="pun">:</span><span class="pln"> linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">206</span><span class="pun">,</span><span class="lit">220</span><span class="pun">,</span><span class="lit">231</span><span class="pun">,</span><span class="lit">1</span><span class="pun">)</span><span class="pln"> </span><span class="lit">0</span><span class="pun">%,</span><span class="pln"> 
  rgba</span><span class="pun">(</span><span class="lit">89</span><span class="pun">,</span><span class="lit">106</span><span class="pun">,</span><span class="lit">114</span><span class="pun">,</span><span class="lit">1</span><span class="pun">)</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%);</span></pre>
        <div class="linearGradientExample"></div>
        <pre class="prettyprint"><span class="pln">background</span><span class="pun">:</span><span class="pln"> radial</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">center</span><span class="pun">,</span><span class="pln"> </span><span class="lit">100px</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">,</span><span class="pln"> red</span><span class="pun">,</span><span class="pln"> black</span><span class="pun">);</span></pre>
        <div class="radialGradientExample"></div>
        <p><a href="http://colorzilla.com/gradient-editor/">http://colorzilla.com/gradient-editor/</a></p>
      </article>
      
      <article>
        <h3>Transitions &amp; Transforms</h3>
        <pre class="dt-r prettyprint"><span class="pln">div </span><span class="pun">{</span><span class="pln">
  margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">2100px</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">0.5</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> all </span><span class="lit">800ms</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">in</span><span class="pun">;</span><span class="pln"> 
     </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> all </span><span class="lit">800ms</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">in</span><span class="pun">;</span><span class="pln"> 
       </span><span class="pun">-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> all </span><span class="lit">800ms</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">in</span><span class="pun">;</span><span class="pln"> 
          transition</span><span class="pun">:</span><span class="pln"> all </span><span class="lit">800ms</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">in</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="pun">.</span><span class="pln">div</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln">
  margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> scale</span><span class="pun">(</span><span class="lit">1.0</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></pre> 
      </article>
                  
     
      <article>
        <h2>Offline Access and Client-Side Storage</h2>
      </article>

	 <article>
        <h3>Application Cache</h3>
        <div>
          Specify files which should be saved for future offline access. 
        </div>
        <pre class="prettyprint"><span class="tag">&lt;html</span><span class="pln"> </span><b><span class="atn">manifest</span><span class="pun">=</span><span class="atv">"cache.appcache"</span></b><span class="tag">&gt;</span></pre>  
<p>cache.appcache:</p>
<pre class="prettyprint" style="margin-top:10px;"><span class="pln">CACHE MANIFEST
</span><span class="com"># version 1.0.0</span><span class="pln">

CACHE</span><span class="pun">:</span><span class="pln">
</span><span class="str">/html5/</span><span class="pln">src</span><span class="pun">/</span><span class="pln">logic</span><span class="pun">.</span><span class="pln">js
</span><span class="pun">/</span><span class="pln">html5</span><span class="pun">/</span><span class="pln">src</span><span class="pun">/</span><span class="pln">style</span><span class="pun">.</span><span class="pln">css
</span><span class="pun">/</span><span class="pln">html5</span><span class="pun">/</span><span class="pln">src</span><span class="pun">/</span><span class="pln">background</span><span class="pun">.</span><span class="pln">png

NETWORK</span><span class="pun">:</span><span class="pln">
</span><span class="pun">*</span></pre>
      </article>

      <article>
        <h3>Web Storage</h3>
        <pre class="prettyprint"><span class="pln">saveButton</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  window</span><span class="pun">.</span><span class="pln">localStorage</span><span class="pun">.</span><span class="pln">setItem</span><span class="pun">(</span><span class="str">'value'</span><span class="pun">,</span><span class="pln"> area</span><span class="pun">.</span><span class="pln">value</span><span class="pun">);</span><span class="pln">
  window</span><span class="pun">.</span><span class="pln">localStorage</span><span class="pun">.</span><span class="pln">setItem</span><span class="pun">(</span><span class="str">'timestamp'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">()).</span><span class="pln">getTime</span><span class="pun">());</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">);</span><span class="pln">
textarea</span><span class="pun">.</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">localStorage</span><span class="pun">.</span><span class="pln">getItem</span><span class="pun">(</span><span class="str">'value'</span><span class="pun">);</span></pre> 
        <textarea id="ta" placeholder="Type your text here..." style="width: 450px; height: 75px;"></textarea> <br>
        <button id="save-ta">Save</button> 
        <p id="ta-log"></p>

        <script defer="defer"> 
          (function(){

            try {
              (window.localStorage.getItem) // will throw in Firefox under some settings
            } catch(e){
              return; // quit because dom.storage.enabled is false
            }

            var area = document.querySelector('#ta');
            // place content from previous edit
            if (!area.value) {
              area.value = window.localStorage.getItem('value');
            }
            updateLog(false);

            // your content will be saved locally
            document.querySelector('#save-ta').addEventListener('click', function () {
              window.localStorage.setItem('value', area.value);
              window.localStorage.setItem('timestamp', (new Date()).getTime());
              updateLog(true);
            }, false);

            function updateLog(new_save) {
              var log = document.querySelector("#ta-log");
              var delta = 0;
              if (window.localStorage.getItem('value')) {
                delta = ((new Date()).getTime() - (new Date()).setTime(window.localStorage.getItem('timestamp'))) / 1000;
                if (new_save) {
                  log.textContent = 'Saved.';
                  setTimeout(function() {
                    log.textContent = '';
                  }, 3000);
                } else {
                  log.textContent = 'last saved: ' + delta + 's ago';
                }
              }
            }

          })();  
        </script>
      </article>
	
      <article>
        <h3>IndexedDB</h3>
        <p>Will eventually replace WebSQL as an object store, for storing significant quantities of structured JSON data.</p>
        <pre class="prettyprint"><span class="kwd">var</span><span class="pln"> idbRequest </span><span class="pun">=</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">indexedDB</span><span class="pun">.</span><span class="pln">open</span><span class="pun">(</span><span class="str">'Database Name'</span><span class="pun">);</span><span class="pln">
idbRequest</span><span class="pun">.</span><span class="pln">onsuccess </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> db </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">result</span><span class="pun">;</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> transaction </span><span class="pun">=</span><span class="pln"> db</span><span class="pun">.</span><span class="pln">transaction</span><span class="pun">([],</span><span class="pln"> </span><span class="typ">IDBTransaction</span><span class="pun">.</span><span class="pln">READ_ONLY</span><span class="pun">);</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> curRequest </span><span class="pun">=</span><span class="pln"> 
    transaction</span><span class="pun">.</span><span class="pln">objectStore</span><span class="pun">(</span><span class="str">'ObjectStore Name'</span><span class="pun">).</span><span class="pln">openCursor</span><span class="pun">();</span><span class="pln">
  curRequest</span><span class="pun">.</span><span class="pln">onsuccess </span><span class="pun">=</span><span class="pln"> </span><span class="pun">...;</span><span class="pln">
</span><span class="pun">};</span></pre>

		<br/>
		<a href="http://greenido.wordpress.com/2011/06/24/how-to-use-indexdb-code-and-example/">How To Use IndexedDB</a>
      </article>
      
      <article>
        <h3>Web Workers</h3>
        <div class="build">
        <div class="to-build">
        <p style="margin-top:0px;font-size: 24px;margin-bottom:0px;">index.html</p>
        <pre class="prettyprint" style="margin-top:0px;margin-bottom:5px;"><span class="kwd">function</span><span class="pln"> startWorker</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> myWorker </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Worker</span><span class="pun">(</span><span class="str">'scripts/worker.js'</span><span class="pun">);</span><span class="pln">
  myWorker</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"message"</span><span class="pun">,</span><span class="pln"> workerListener</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">);</span><span class="pln">
  myWorker</span><span class="pun">.</span><span class="pln">postMessage</span><span class="pun">(</span><span class="pln">settings</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></pre></div>
<div class="to-build">
<p style="margin-top:5px;margin-bottom:0px;font-size:24px;">worker.js</p>
      <pre class="prettyprint" style="margin-top:0px;"><span class="kwd">self</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'message'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  doSomeWork</span><span class="pun">();</span><span class="pln">
</span><span class="pun">};</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> doSomeWork</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  importScripts</span><span class="pun">(</span><span class="str">'http://url?callBack=handleWork'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> handleWork</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  postMessage</span><span class="pun">(</span><span class="pln">result</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></pre></div></div>
      </article>
      
<!-- ChromeOS -->
	<article>
     	<h2>ChromeOS</h2>
		<img src="images/chromebook.png">
   </article>

	<article class="current">
        <div class="build" style="margin-top: 150px;">
          <div class="formula">The Power Of The Cloud</div>
          <div class="formula">+</div>
          <div class="formula" style="border-bottom: 1px solid black;padding-bottom: 25px;">Desktop Richness</div>
          <div class="formula" style="margin-top:40px;"><strong>Modern Web Apps</strong></div>
        </div>
      </article>

      <!-- The New File/Uploader APIs -->
        <article class='smaller'>
            <h3>
                chrome.fileBrowserHandler
            </h3>
            <p>
                Use <strong>chrome.fileBrowserHandler</strong> module to extend the Chrome OS file browser. 
            </p>
            <br/>
            <img src="http://code.google.com/chrome/extensions/trunk/images/filebrowserhandler.png"></img>


        </article>

        <article class='smaller'>
            <h3>
                File API - Manifest
            </h3>
            <p>
  Declare the "fileBrowserHandler" permission in the extension manifest, and use the "file_browser_handlers" 
            <section>
                <pre>{
  "name": "Upload to flickr",
  ...
  "file_browser_handlers": [
  {
    "id": "upload",
    "default_title": "Save to flickr", // What the button will display
    "file_filters": [
    "filesystem:*.jpg",
    "filesystem:*.jpeg",
    "filesystem:*.png"
    ]
  }
  ],
  "permissions" : [
    "fileBrowserHandler"
  ],
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}
                </pre>
            </section>
            </p>
        </article>

        <article class='smaller'>
            <h3>
                File Uploader JS Example
            </h3>
            <section><pre>
uploadFile: function(file) {
  var pro1 = document.querySelector('#pro1');
  var progressBar =  pro1.querySelector('progress');
  var formData = new FormData();
  formData.append('file', file);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', this.uploadServer, true);

  xhr.onload = function(e) {
    if (this.status == 200) {
        console.log(this.response);
        alert("The image is safe in Flickr " + this.response);
    }
};

xhr.onerror = function(e) {
    console.log(this, this.status, this.responseText, 
    this.getAllResponseHeaders())
};

xhr.send(formData);
},
...</pre>
            </section>
        </article>



<!-- Tools -->
      <article>
        <h2>Tools &amp; Resources</h2>
      </article>
      
      <article>
        <a href="http://bit.ly/nJjfDS">
          <img src="images/chrome-frame.png" class="centered" style="width: 600px;">
        </a> 
      </article>
      
      <article class="nobackground">
        <h3>ChromeStatus.com</h3>
        <iframe src="http://ChromeStatus.com"></iframe>
      </article>

      <article class="nobackground">
        <h3>updates.HTML5Rocks.com</h3>
        <iframe src="http://updates.HTML5Rocks.com"></iframe>
      </article>
      
      <article>
        <h3>Resources</h3>
        <h4 style="margin-bottom: 10px;">Developer Guides &amp; Tutorials</h4>
        <ul style="margin-top:10px;">
          <li><a href="http://www.html5rocks.com/" target="_blank">html5rocks.com</a> - learn by tutorial</li>
          <li><a href="http://caniuse.com/" target="_blank">caniuse.com</a> - compatibility tables</li>
			<li><a href="http://code.google.com/chrome/apps/docs/developers_guide.html"
					   target="_blank">Web Apps In Chrome</a> - on Google code</li>	
        </ul>
        <h4 style="margin-bottom: 10px;">Tools &amp; Libraries</h4>
        <ul style="margin-top: 10px;">
          <li>Chrome's <a href="http://code.google.com/chrome/devtools/" target="_blank">DevTools</a> - invaluable</li>
          <li><a href="http://html5boilerplate.com/" target="_blank">HTML5 Boilerplate</a>  and <a href="http://www.modernizr.com/" target="_blank">Modernizr</a> - foundation</li>
        </ul>
      </article>
      
      <article>
        <h3>
         Thank you!
        </h3>
        <div style="margin-left:150px;margin-top:175px;">
          <h4 style="font-size:32pt;">Questions?</h4>
          <p>Ido Green<br/>
	 		<a href="http://twitter.com/greenido" target="_blank">@greenido</a> <a href="http://goo.gl/2vW7g" target="_blank">+Google</a>
          <a href="http://greenido.wordpress.com/">greenido.wordpress.com</a><br/>
		  </p>
		  <p>
          Get the slides at <a href="http://bit.ly/html5LiveLondon">bit.ly/html5LiveLondon</a>
          
          </p>
        </div>
      </article>

    <div id="prev-slide-area" class="slide-area"></div><div id="next-slide-area" class="slide-area"></div></section>
    <script src="js/js.js"></script>
	
    <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23212314-3']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>

  

  <link href="css/css.css" type="text/css" rel="stylesheet">
  <link href="css/styles.css" type="text/css" rel="stylesheet">
  <script src="js/prettify.js"></script>
</body>
</html>	
